<template>
  <div class="index">
    <img :src="require('@/assets/index-banner.png')" alt="" class="index-banner">
    <div class="index-view">
      <div class="index-line__1 flex-sp">
        <div v-for="(v, i) in line1" :key="i">
          <img :src="require(`@/assets/14@2x(${i}).png`)" alt="">
          <p class="title">{{v.text}}</p>
          <p class="info">{{v.info}}</p>
        </div>
      </div>
      <div class="index-line__1 flex-sp">
        <div v-for="(v, i) in line2" :key="i">
          <img :src="require(`@/assets/2@2x(${i}).png`)" alt="">
          <p class="title">{{v.text}}</p>
          <p class="info">{{v.info}}</p>
        </div>
      </div>
      <div class="index-line__1 flex-sp">
        <div v-for="(v, i) in line3" :key="i">
          <img :src="require(`@/assets/3@2x(${i}).png`)" alt="">
          <p class="title">{{v.text}}</p>
          <p class="info">{{v.info}}</p>
        </div>
      </div>
      <div class="index-tip flex-sp">
        <p><span>找人</span>(提供各种技能人才对接)</p>
        <label>手机APP安装</label>
      </div>
      <div class="index-line__2 flex-sp">
        <div v-for="(v, i) in line4" :key="i" :class="{'marginR': (i + 1) % 7 != 0}">
          <img :src="require(`@/assets/z1 (${i + 1}).png`)" alt="">
        </div>
      </div>
      <div class="index-tip flex-sp">
        <p><span>家电维修</span>(提供各种技能人才对接)</p>
        <label>安装上门服务APP，找人、找车、找房更方便</label>
      </div>
      <div class="index-line__2 flex-sp">
        <div v-for="(v, i) in line5" :key="i" :class="{'marginR': (i + 1) % 7 != 0}">
          <img :src="require(`@/assets/z2 (${i + 1}).png`)" alt="">
        </div>
      </div>
      <div class="index-tip flex-sp">
        <p><span>汽车出租</span>(提供各种技能人才对接)</p>
        <label>安装上门服务APP，找人、找车、找房更方便</label>
      </div>
      <div class="index-line__2 flex-sp">
        <div v-for="(v, i) in line6" :key="i" :class="{'marginR': (i + 1) % 7 != 0}">
          <img :src="require(`@/assets/z3 (${i + 1}).png`)" alt="">
        </div>
      </div>
      <div class="index-tip flex-sp">
        <p><span>司机招聘</span>(提供各种技能人才对接)</p>
        <label>安装上门服务APP，找人、找车、找房更方便</label>
      </div>
      <div class="index-line__2 flex-sp">
        <div v-for="(v, i) in line7" :key="i" :class="{'marginR': (i + 1) % 7 != 0}">
          <img :src="require(`@/assets/z4 (${i + 1}).png`)" alt="">
        </div>
      </div>
      <div class="index-tip flex-sp">
        <p><span>找房</span>(提供各种技能人才对接)</p>
        <label>安装上门服务APP，找人、找车、找房更方便</label>
      </div>
      <div class="index-line__2 flex-sp">
        <div v-for="(v, i) in line8" :key="i" :class="{'marginR': (i + 1) % 7 != 0}">
          <img :src="require(`@/assets/z5 (${i + 1}).png`)" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      line1: [
        {
          text: '汽车公告查询(免费)',
          info: '汽车公告查询效果图'
        },
        {
          text: '底盘公告查询(免费)',
          info: '汽车底盘查询效果图'
        },
        {
          text: '摩托车公告查询(免费)',
          info: '摩托车公告查询效果图'
        },
        {
          text: '车辆违章查询(免费)',
          info: '车辆违章查询效果图'
        }
      ],
      line2: [
        {
          text: '汽车识别代码查询',
          info: '汽车VIN查询效果图'
        },
        {
          text: '车辆配置查验',
          info: '汽车配置查询效果图'
        },
        {
          text: '车牌号查车(免费)',
          info: '车牌号查车效果图'
        },
        {
          text: '驾驶证查验(免费)',
          info: '驾驶证查验效果图'
        }
      ],
      line3: [
        {
          text: '车辆过户记录查询',
          info: '车辆过户记录查询效果图'
        },
        {
          text: '车辆交强险查询',
          info: '车辆交强险查询效果图'
        },
        {
          text: 'VIN查询车辆配件',
          info: 'VIN码查询车辆配件效果图'
        },
        {
          text: '维修记录查询',
          info: '维修记录查询效果图'
        }
      ],
      line4: [],
      line5: [],
      line6: [],
      line7: [],
      line8: []
    }
  },
  mounted() {
    this.line4  = Array.from({length: 56})
    this.line5  = Array.from({length: 28})
    this.line6  = Array.from({length: 21})
    this.line7  = Array.from({length: 21})
    this.line8  = Array.from({length: 14})
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.index {
  /* width: 1200px; */
  .index-banner {
    width: 100%;
  }
  .index-view {
    width: 1200px;
    margin: auto;
    background: #fff;
  }
  .index-line__1 {
    margin: auto;
    width: 920px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 33px 0;
    img {
      width: 140px;
      height: 140px;
    }
    .title {
      font-size: 18px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      line-height: 30px;
      color: #01030C;
      margin: 14px 0 10px;
    }
    .info {
      font-size: 14px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      line-height: 41px;
      color: #2979FF;
    }
  }
  .index-line__2 {
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    img {
      width: 100px;
      height: 100px;
      padding: 20px 0;
    }
    .marginR {
      margin-right: 77px;
    }
  }
  .index-tip {
    height: 50px;
    padding: 0 20px;
    font-size: 16px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    line-height: 26px;
    color: #333333;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    span {
      font-size: 20px;
    }
    label {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      line-height: 26px;
      color: #19BE6B;
    }
  }
}
</style>
